<template>
    <el-drawer v-model="isDrawerVisible" title="订单详情" :with-header="true" width="80%">
        <div class="detail-container">
            <el-tabs v-model="activeTab" type="border-card">
                <el-tab-pane label="基本信息">
                    <el-descriptions direction="vertical" :column="3" size="large" border>
                        <el-descriptions-item label="订单ID">{{order.id}}</el-descriptions-item>
                        <el-descriptions-item label="订单号">{{order.dingdan_num}}</el-descriptions-item>
                        <el-descriptions-item label="用户ID">{{order.user_id}}</el-descriptions-item>
                        <el-descriptions-item label="店铺ID">{{order.shop_id}}</el-descriptions-item>
                        <el-descriptions-item label="骑手ID">{{order.rider_id}}</el-descriptions-item>
                        <el-descriptions-item label="地址ID">{{order.address_id}}</el-descriptions-item>
                        <el-descriptions-item label="订单状态">{{order.state== '1' ? '已完成' : order.state== '0' ? '进行中' : '已取消'}}</el-descriptions-item>
                        <el-descriptions-item label="订单金额">{{order.money}} 元</el-descriptions-item>
                        <el-descriptions-item label="小费">{{order.gratuity}} 元</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{order.time}}</el-descriptions-item>
                        <el-descriptions-item label="完成时间">{{order.end_time || '未完成'}}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{order.remark || '无'}}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>

                <el-tab-pane label="订单明细">
                    <el-table :data="detailData" stripe hover-row border style="width: 100%">
                        <el-table-column type="index" label="序号" width="80" align="center"/>
                        <el-table-column prop="dish_name" label="商品名称" align="center"/>
                        <el-table-column prop="num" label="数量" align="center"/>
                        <el-table-column prop="price" label="单价" align="center"/>
                        <el-table-column prop="total" label="小计" align="center" :formatter="(row) => row.num * row.price"/>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElMessage } from "element-plus";
import axios from 'axios';

// 控制抽屉显示
const isDrawerVisible = ref(false);
const activeTab = ref('0');
const order = ref({});
const detailData = ref([]);

// 接收父组件传递的订单数据
const handleDetailData = (obj) => {
    isDrawerVisible.value = true;
    order.value = obj;
    loadDetailData(obj.dingdan_num);
};

// 加载订单明细
const loadDetailData = async (dingdan_num) => {
    try {
        const { data } = await axios.get(`/api/dingdandetail?dingdan_num=${dingdan_num}`);
        detailData.value = data;
    } catch (error) {
        ElMessage.error('加载订单明细失败');
        console.error(error);
    }
};

// 暴露方法给父组件
defineExpose({
    handleDetailData
});
</script>

<style scoped>
.detail-container {
    padding: 10px;
}
</style>